<template>
    <el-drawer title="导出订单" v-model="dialogVisible" size="30%" :destroy-on-close="true" :show-close="true"
        :wrapperClosable="true">
        <el-form :model="form" label-width="80px" :inline="false">
            <el-form-item label="订单类型">
                <el-select v-model="form.tab" placeholder="请选择" clearable>
                    <el-option v-for="item in tabs" :key="item.key" :label="item.name" :value="item.key">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="时间范围">
                <el-date-picker v-model="form.time" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" />
            </el-form-item>
            <el-form-item >
                <el-button type="primary" size="default" @click="onSubmit" :loading="laoding">导出订单</el-button>
            </el-form-item>
        </el-form>

    </el-drawer>
</template>

<script setup>
import { Close } from "@element-plus/icons-vue";
import { ref, reactive } from "vue"
import { excelexportOrder } from "~/api/order.js"
import { toast } from '~/composables/util.js';
defineProps({
    tabs: Array
})
const dialogVisible = ref(false);
const form = reactive({
    tab: null,
    time: "",

})
const open = () => dialogVisible.value = true;
const close = () => dialogVisible.value = false;

const laoding = ref(false);
const onSubmit = () => {
    if(!form.time) return toast("订单时间不能为空","error");
    laoding.value = true;
    let starttime = null;
    let endtime = null;
    if(form.time && Array.isArray(form.time)){
        starttime = form.time[0];
        endtime = form.time[1];
    }
    console.log(starttime,endtime);
    excelexportOrder({
        tab:form.tab,
        starttime,
        endtime
    }).then(res => {
       let url = window.URL.createObjectURL(new Blob([res]));
       let link = document.createElement("a");
       link.style.display = 'none';
       link.href = url;
       let filename = (new Date()).getTime() + ".xlsx";
       link.setAttribute("download",filename);
       document.body.appendChild(link);
       link.click();
       close();
    }).finally(() => {
        laoding.value = false;
    })
}
defineExpose({
    open,
    close
})
</script>